<!--车位管理-->
<template>
  <div style="background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">车位管理</span>
  </div>
  <!-- 车位数据搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="审核状态">
        <el-select placeholder="请选择车位状态" style="width:220px;" v-model="searchCarportForm.pstatus">
          <el-option label="全部" value="10"></el-option>
          <el-option label="审核中" value="20"></el-option>
          <el-option label="已审核" value="30"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车位编号">
        <el-input placeholder="请输入" style="width:220px;" v-model="searchCarportForm.pnum"
                  @keydown.enter="loadCarport"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadCarport">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!--  审核车位-->
  <el-dialog style="width:1000px;padding:40px;"
             :title="dialogTitle" v-model="examinesCarport" :before-close="handleClose">
    <el-form>
      <el-card style="margin-bottom: 20px">
        <el-form-item label="审核流程"></el-form-item>
        <el-form-item>
          <template #default>
            <el-steps
                style="min-width: 750px;"
                :active="1"
                finish-status="success"
            >
              <el-step title="提交车位信息2020.09.09 10:12"/>
              <el-step title="物业审核"/>
              <el-step title="认证通过"/>
            </el-steps>
          </template>
        </el-form-item>
      </el-card>

      <el-card style="margin-bottom: 20px">
        <el-form-item>车位信息</el-form-item>
        <el-form-item >
          <template #default>
            <el-descriptions style="min-width: 800px;">
              <el-descriptions-item label="区域:">{{saveCarportForm.pregion}}</el-descriptions-item>
              <el-descriptions-item label="车位编号:">{{saveCarportForm.pnum}}</el-descriptions-item>
              <el-descriptions-item label="车位面积:">{{saveCarportForm.parea}}</el-descriptions-item>
              <el-descriptions-item label="楼层:">{{saveCarportForm.pfloor}}</el-descriptions-item>
              <el-descriptions-item label="车位类型:">{{saveCarportForm.ptype}}</el-descriptions-item>
              <el-descriptions-item label="车位状态:">{{saveCarportForm.pstatus}}</el-descriptions-item>
              <el-descriptions-item label="持有人:">蒋锋</el-descriptions-item>
              <el-descriptions-item label="添加时间:">2019-09-09 10:40</el-descriptions-item>
              <el-descriptions-item label="添加人:">林莉莉</el-descriptions-item>
            </el-descriptions>
          </template>
        </el-form-item>
      </el-card>
      <el-card style="margin-bottom: 20px">
        <el-form-item>车辆信息</el-form-item>
        <el-form-item>
          <template #default>
            <el-descriptions style="min-width: 800px;">
              <el-descriptions-item label="车牌号">浙B·N6698</el-descriptions-item>
              <el-descriptions-item label="车辆品牌:">宝马</el-descriptions-item>
              <el-descriptions-item label="车辆型号:">X5</el-descriptions-item>
              <el-descriptions-item label="车身颜色:">白色</el-descriptions-item>
                <el-descriptions-item label="车辆图片:">
                  <img src="/1.png" style="width: 150px;">
                </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-form-item>
      </el-card>
      <el-card style="margin-bottom: 20px">
        <el-form-item>审核</el-form-item>
        <!--        添加审核意见-->
          <el-form-item label="审核意见:">
            <el-input type="textarea" resize="none" :rows="4" style="width: 500px" placeholder="请输入审核意见"
                      v-model="examineOpinion"></el-input>
          </el-form-item>
        <el-form-item>
          <template #default>
            <el-button type="primary"  @click="examinesCarport=false;">审核通过</el-button>
            <el-button type="danger"  @click="examinesCarport=false;">审核不通过</el-button>
            <el-button @click="examinesCarport=false;">返回</el-button>
          </template>
        </el-form-item>
      </el-card>
    </el-form>
  </el-dialog>

  <!--  车位列表-->
  <el-card style="margin:20px;">
    <div style="margin:10px 0px 40px 10px;">车位列表
      <el-button @click="dialogCarport=true;" type="primary" style="float: right;margin-top:-3px;">新建</el-button>
    </div>
    <el-table :data="carportArr">
      <el-table-column prop="pregion" label="区域"  align="center" :formatter="pregionFormatter"/>
      <el-table-column prop="pnum" label="车位编号" align="center"/>
      <el-table-column prop="parea" label="面积" align="center"/>
      <el-table-column prop="pfloor" label="楼层" align="center"/>
      <el-table-column prop="ptype" label="车辆类型" align="center" :formatter="ptypeTypeFormatter"/>
      <el-table-column prop="pstatus" label="车位状态" align="center" :formatter="pstatusStatusFormatter"/>
      <el-table-column prop="plandlord" label="审核状态" align="center"/>
      <el-table-column prop="plandlord" label="审核状态" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="examineCarport(scope.row.pid)">审核</el-button>
          <el-button link type="primary" size="small" @click="editCarport(scope.row.pid)">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteCarport(scope.row.pid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 新建车位 -->
  <el-dialog style="width:1000px;padding:40px;"
             :title="dialogTitle" v-model="dialogCarport" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="区域">
            <el-select placeholder="请选择区域" v-model="saveCarportForm.pregion">
              <el-option label="地下停车场A区" value="10"></el-option>
              <el-option label="地下停车场C区" value="20"></el-option>
              <el-option label="地下停车场D区" value="30"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车位编号">
            <el-input placeholder="请输入" v-model="saveCarportForm.pnum"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车位面积㎡">
            <el-input placeholder="请输入" v-model="saveCarportForm.parea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="楼层">
            <el-input placeholder="请输入" v-model="saveCarportForm.pfloor"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="车位状态">
            <el-select placeholder="请选择" v-model="saveCarportForm.pstatus">
              <el-option label="闲置" value="10"></el-option>
              <el-option label="自用" value="20"></el-option>
              <el-option label="租赁" value="30"></el-option>
              <el-option label="借出" value="40"></el-option>
              <el-option label="其他" value="50"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车位类型">
            <el-select placeholder="请选择" v-model="saveCarportForm.ptype">
              <el-option label="产权车位" value="10"></el-option>
              <el-option label="公共停车位" value="20"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">返回</el-button>
      <el-button type="primary" @click="saveCarport">提交</el-button>
    </template>
  </el-dialog>
</template>

<script setup>

import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

const dialogCarport = ref(false);
const examinesCarport = ref(false);
//标题
const dialogTitle = ref('新建车位');
// 保存车位
const saveCarportForm = ref({
  pregion: '',
  pnum: '',
  parea: '',
  pfloor: '',
  pstatus: '',
  ptype: '',
});
// 车位列表
const carportArr = ref([]);
// 搜索条件
const searchCarportForm = ref({pstatus: '', pnum: ''});
// 查询车位
const loadCarport = () => {
  // 将表单查询参数序列化为字符串
  let data = qs.stringify(searchCarportForm.value);
  // 发送GET请求获取停车场列表数据
  axios.get(BASE_URL + '/v1/carport/select/?' + data).then((response) => {
    // 判断响应代码，处理响应数据
    if (response.data.code == 2000) {
      carportArr.value = response.data.data;
      console.log(carportArr.value)
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
// 重置搜索
const resetSearch = () => {
  searchCarportForm.value = {};
  loadCarport();
};
// 页面加载
onMounted(() => {
  loadCarport();
});
//新建车位
const saveCarport = () => {
  let data = qs.stringify(saveCarportForm.value);
  // console.log("这是data："+data)
  axios.post(BASE_URL + '/v1/carport/save', data).then((response) => {
    if (response.data.code == 2000) {
      ElMessage.success('提交成功!');
      // console.log(response.data.data);
      dialogCarport.value = false;
      saveCarportForm.value = {};
      loadCarport();
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
// 关闭弹窗
const handleClose = () => {
  dialogCarport.value = false;
  examinesCarport.value = false;
  saveCarportForm.value = {};
  loadCarport();
}
const pregionFormatter = (row, column, cellValue, index) => {
  if (cellValue == 10) {
    cellValue = '地下停车场A区';
  } else if (cellValue == 20) {
    cellValue = '地下停车场C区';
  } else if (cellValue == 30) {
    cellValue = '地下停车场D区';
  }
  return cellValue;
};
const pstatusStatusFormatter = (row, column, cellValue, index) => {
  if (cellValue == 10) {
    cellValue = '闲置';
  } else if (cellValue == 20) {
    cellValue = '自用';
  } else if (cellValue == 30) {
    cellValue = '租赁';
  } else if (cellValue == 40) {
    cellValue = '借出';
  } else if (cellValue == 50) {
    cellValue = '其他';
  }
  return cellValue;
};
const ptypeTypeFormatter = (row, column, cellValue, index) => {
  if (cellValue == 10) {
    cellValue = '产权车位';
  } else if (cellValue == 20) {
    cellValue = '公共停车位';
  }
  return cellValue;
};

// 编辑车位
const editCarport = (pid) => {
  dialogCarport.value = true;
  dialogTitle.value = '编辑车位';
  axios.get(BASE_URL + '/v1/carport/select?pid=' + pid).then((response) => {
    if (response.data.code == 2000) {
      saveCarportForm.value = response.data.data[0];
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
// 删除车位
const deleteCarport = (pid) => {
  console.log(pid);
  if (confirm("您要确定删除吗？"))
    axios.post(BASE_URL + '/v1/carport/delete/' + pid).then((response) => {
      if (response.data.code == 2000) {
        ElMessage.success('删除成功!');
        loadCarport();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
}
// 审核车位
const examineCarport = (pid) => {
  examinesCarport.value = true;
  dialogTitle.value = '车位详情';
  axios.get(BASE_URL + '/v1/carport/select?pid=' + pid).then((response) => {
    if (response.data.code == 2000) {
      saveCarportForm.value = response.data.data[0];
      console.log(saveCarportForm.value);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
</script>

<style scoped>

</style>